<!--
 * @Author: cl
 * @Description: 
 * @Date: 2022-10-24 16:42:22
 * @LastEditTime: 2022-11-15 11:16:37
 * @FilePath: \vue3\src\views\vue3Study\css.vue
-->
<template>
  <div class="css-bg">
    <div :class="xiaoli.myclass">css的自定义module</div>
    <div class="myclass">常规css</div>
    <div class="mytheme" @click="changeColor">v-bind动态css点击切换</div>
    <div class="mytheme" v-once>once</div>
    <div class="vbindcss" @click="changeMyColor">v-bind动态css点击切换</div>
    <div :class="$style.nocss" >我是蓝色</div>


    <span v-pre>{{ this will not be compiled }}</span>
    <div @click="changeTransition">changeTransition</div>
    <Transition>
      <div v-if="ok">显示</div>
    </Transition>
    <div class="divblock">
      scoped的css测试
      <div class="fucss">
        <CssChildren></CssChildren>
      </div>
    </div>
    <div class="divblock">
      solt测试
      <div>
        <CssChildrenSolt class="muslot">
          <template v-slot:footer>foot</template>
          <template v-slot:header>header</template>
          <template v-slot:bodyer>bodyer</template>
          <template v-slot>我也不知道</template>
        </CssChildrenSolt>
      </div>
    </div>
    <div class="divblock">
      v-bind测试
      <div class="test-css">
        hahahah

      </div>
    </div>
  </div>
</template>

<script setup ts>
import { reactive, useCssModule, ref } from "vue";
import CssChildren from "./cssChildren.vue";
import CssChildrenSolt from "./cssChildrenSolt.vue";

//css  v-vind
//css model
let cssLocal = useCssModule("xiaoli");
console.log(cssLocal);

let mytheme = reactive({
  bindColor: "red",
});

let changeColor = () => {
  if ("green" == mytheme.bindColor) {
    mytheme.bindColor = "blue";
  } else {
    mytheme.bindColor = "green";
  }
  console.log(mytheme.bindColor);
};

let myColor = ref("pink");
let changeMyColor = () => {
  if ("green" == myColor.value) {
    myColor.value = "blue";
  } else {
    myColor.value = "green";
  }
  console.log(myColor);
};

let youtheme = reactive({
  color: 'green'
})

//Transition
let ok = ref(true)
let changeTransition = () => {
  ok.value = !ok.value
}

//css scoped

</script>
<style lang="scss" scoped>
// .muslot :slotted(.bodyercss) {
//   background-color: pink;
// }

.muslot {
  padding: 20px;
  background-color: pink;
}


:slotted(div) {
  color: red;
}

.myclass {
  color: blue;
}

.mytheme {
  color: v-bind("mytheme.bindColor");
}

.vbindcss {
  color: v-bind("myColor");
}

.v-enter-active,
.v-leave-active {
  transition: opacity 2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.fucss {
  background-color: blue !important;
  width: 200px;
  height: 200px;
  color: #ffffff;
  margin: 50px;
}

.fucss :deep(.childbg) {
  /* ... */
  width: 150px;
  height: 150px;
  color: red;
}

.css-bg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
}

.divblock {
  border-radius: 20px;
  margin: 10px;
  background: #ffffff;
  width: 100%;
}

.test-css {
  color: v-bind('youtheme.color')
}
</style>
<style module="xiaoli" lang="scss">
.myclass {
  color: red;
}
</style>
<style module>
.nocss {
  color: green;
}
</style>
<style >
:global(.muslot) {
  background-color: gray;
}
</style>
